React memo: कंपोनेंट मेमोइझेशन आणि रेंडर ऑप्टिमायझेशनमध्ये प्राविण्य

React डेव्हलपमेंटच्या जगात, परफॉर्मन्सला सर्वात जास्त महत्त्व आहे. ऍप्लिकेशन्सची जटिलता जसजशी वाढत जाते, तसतसे सुरळीत आणि कार्यक्षम रेंडरिंग सुनिश्चित करणे अधिक महत्त्वाचे ठरते. हे साध्य करण्यासाठी React डेव्हलपरच्या शस्त्रागारातील एक शक्तिशाली साधन म्हणजे React.memo. हा ब्लॉग पोस्ट React.memo च्या गुंतागुंतीचा शोध घेतो, त्याचा उद्देश, वापर आणि रेंडरिंग परफॉर्मन्स ऑप्टिमाइझ करण्यासाठी सर्वोत्तम पद्धतींचा शोध घेतो.

कंपोनेंट मेमोइझेशन म्हणजे काय?

कंपोनेंट मेमोइझेशन हे एक ऑप्टिमायझेशन तंत्र आहे जे एखाद्या कंपोनेंटचे प्रॉप्स (props) बदलले नसताना त्याचे अनावश्यक री-रेंडरिंग (re-renders) प्रतिबंधित करते. दिलेल्या प्रॉप्सच्या सेटसाठी रेंडर केलेले आउटपुट लक्षात ठेवून, React कंपोनेंटचे री-रेंडरिंग वगळू शकते जर प्रॉप्स समान राहिले, ज्यामुळे विशेषतः गणनारूपी (computationally expensive) कंपोनेंट्स किंवा वारंवार री-रेंडर होणाऱ्या कंपोनेंट्ससाठी लक्षणीय परफॉर्मन्स वाढतो.

मेमोइझेशनशिवाय, React कंपोनेंट्स त्यांच्या पॅरेंट कंपोनेंटच्या री-रेंडरिंगवेळी पुन्हा री-रेंडर होतात, जरी चाईल्ड कंपोनेंटला दिलेले प्रॉप्स बदलले नसले तरीही. यामुळे संपूर्ण कंपोनेंट ट्रीमध्ये री-रेंडर्सची मालिका सुरू होऊ शकते, ज्यामुळे ऍप्लिकेशनच्या एकूण परफॉर्मन्सवर परिणाम होतो.

React.memo ची ओळख

React.memo हे React ने पुरवलेले एक हायर-ऑर्डर कंपोनेंट (HOC) आहे जे फंक्शनल कंपोनेंटला मेमोइझ करते. हे मूलतः React ला सांगते की दिलेल्या प्रॉप्सच्या सेटसाठी कंपोनेंटचे आउटपुट 'लक्षात ठेवा' आणि प्रॉप्स खरोखर बदलले तरच कंपोनेंटला री-रेंडर करा.

React.memo कसे काम करते

React.memo सध्याच्या प्रॉप्सची मागील प्रॉप्ससोबत शॅलो कंपॅरिझन (shallowly compares) करते. जर प्रॉप्स समान असतील (किंवा कस्टम कंपॅरिझन फंक्शन true रिटर्न करत असेल), तर React.memo कंपोनेंटचे री-रेंडरिंग वगळते. अन्यथा, ते कंपोनेंटला नेहमीप्रमाणे री-रेंडर करते.

React.memo चा मूलभूत वापर

React.memo वापरण्यासाठी, फक्त तुमचा फंक्शनल कंपोनेंट त्याने रॅप करा:

            import React from 'react';

const MyComponent = (props) => {
  // Component logic
  return (
    <div>
      {props.data}
    </div>
  );
};

export default React.memo(MyComponent);

            

              
                Copy
              
            
          

या उदाहरणात, MyComponent फक्त तेव्हाच री-रेंडर होईल जेव्हा data प्रॉप बदलेल. जर data प्रॉप समान राहिला, तर React.memo कंपोनेंटला री-रेंडर होण्यापासून प्रतिबंधित करेल.

शॅलो कंपॅरिझन (Shallow Comparison) समजून घेणे

आधी सांगितल्याप्रमाणे, React.memo प्रॉप्सची शॅलो कंपॅरिझन करते. याचा अर्थ असा की ते फक्त प्रॉप्स म्हणून पास केलेल्या ऑब्जेक्ट्स आणि ॲरेजच्या टॉप-लेव्हल प्रॉपर्टीजची तुलना करते. ते या ऑब्जेक्ट्स किंवा ॲरेजच्या आतल्या सामग्रीची खोलवर तुलना करत नाही.

शॅलो कंपॅरिझन ऑब्जेक्ट्स किंवा ॲरेजचे रेफरन्स समान आहेत की नाही हे तपासते. जर तुम्ही इनलाइन तयार केलेले किंवा बदललेले ऑब्जेक्ट्स किंवा ॲरेज प्रॉप्स म्हणून पास करत असाल, तर React.memo त्यांना भिन्न मानेल, जरी त्यांची सामग्री समान असली तरी, ज्यामुळे अनावश्यक री-रेंडर्स होतील.

उदाहरण: शॅलो कंपॅरिझनचे तोटे

            import React, { useState } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data.name}</div>;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // This will cause MyComponent to re-render every time
    // because a new object is created on each click.
    setData({ ...data });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

या उदाहरणात, data ऑब्जेक्टमधील name प्रॉपर्टी बदलत नसली तरीही, बटण प्रत्येक वेळी क्लिक केल्यावर MyComponent री-रेंडर होईल. कारण प्रत्येक क्लिकवर स्प्रेड ऑपरेटर ({ ...data }) वापरून एक नवीन ऑब्जेक्ट तयार होतो, ज्यामुळे एक वेगळा रेफरन्स मिळतो.

कस्टम कंपॅरिझन फंक्शन

शॅलो कंपॅरिझनच्या मर्यादांवर मात करण्यासाठी, React.memo तुम्हाला दुसरे आर्गुमेंट म्हणून एक कस्टम कंपॅरिझन फंक्शन प्रदान करण्याची परवानगी देते. हे फंक्शन दोन आर्गुमेंट्स घेते: मागील प्रॉप्स आणि पुढील प्रॉप्स. जर प्रॉप्स समान असतील (म्हणजे कंपोनेंटला री-रेंडर करण्याची गरज नाही) तर true आणि अन्यथा false रिटर्न करावे.

सिंटॅक्स

            React.memo(MyComponent, (prevProps, nextProps) => {
  // Custom comparison logic
  return true; // Return true to prevent re-render, false to allow re-render
});

            

              
                Copy
              
            
          

उदाहरण: कस्टम कंपॅरिझन फंक्शनचा वापर

            import React, { useState, useCallback } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data.name}</div>;
}, (prevProps, nextProps) => {
  // Only re-render if the name property changes
  return prevProps.data.name === nextProps.data.name;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // This will only cause MyComponent to re-render if the name changes
    setData({ ...data, age: data.age + 1 });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

या उदाहरणात, कस्टम कंपॅरिझन फंक्शन फक्त data ऑब्जेक्टची name प्रॉपर्टी बदलली आहे की नाही हे तपासते. म्हणून, MyComponent फक्त तेव्हाच री-रेंडर होईल जेव्हा name बदलेल, जरी data ऑब्जेक्टमधील इतर प्रॉपर्टीज अपडेट झाल्या असल्या तरी.

React.memo केव्हा वापरावे

जरी React.memo एक शक्तिशाली ऑप्टिमायझेशन साधन असले तरी, ते विचारपूर्वक वापरणे महत्त्वाचे आहे. तुमच्या ऍप्लिकेशनमधील प्रत्येक कंपोनेंटला ते लागू केल्याने शॅलो कंपॅरिझनच्या ओव्हरहेडमुळे प्रत्यक्षात परफॉर्मन्स कमी होऊ शकतो.

खालील परिस्थितीत React.memo वापरण्याचा विचार करा:

• वारंवार री-रेंडर होणारे कंपोनेंट्स: जर एखादा कंपोनेंट वारंवार री-रेंडर होत असेल, जरी त्याचे प्रॉप्स बदलले नसले तरी, React.memo अनावश्यक री-रेंडर्सची संख्या लक्षणीयरीत्या कमी करू शकते.
• गणनारूपी महागडे कंपोनेंट्स: जर एखादा कंपोनेंट जटिल गणना करत असेल किंवा मोठ्या प्रमाणात डेटा रेंडर करत असेल, तर अनावश्यक री-रेंडर्स प्रतिबंधित केल्याने परफॉर्मन्स सुधारू शकतो.
• प्युअर कंपोनेंट्स: जर एखाद्या कंपोनेंटचे आउटपुट पूर्णपणे त्याच्या प्रॉप्सवर अवलंबून असेल, तर React.memo एक चांगला पर्याय आहे.
• वारंवार री-रेंडर होणाऱ्या पॅरेंट कंपोनेंट्सकडून प्रॉप्स मिळत असताना: चाईल्ड कंपोनेंटला अनावश्यकपणे री-रेंडर होण्यापासून टाळण्यासाठी मेमोइझ करा.

खालील परिस्थितीत React.memo वापरणे टाळा:

• क्वचितच री-रेंडर होणारे कंपोनेंट्स: शॅलो कंपॅरिझनचा ओव्हरहेड मेमोइझेशनच्या फायद्यांपेक्षा जास्त असू शकतो.
• वारंवार बदलणारे प्रॉप्स असलेले कंपोनेंट्स: जर प्रॉप्स सतत बदलत असतील, तर React.memo जास्त री-रेंडर्स प्रतिबंधित करणार नाही.
• किमान रेंडरिंग लॉजिक असलेले साधे कंपोनेंट्स: परफॉर्मन्समध्ये होणारे फायदे नगण्य असू शकतात.

React.memo ला इतर ऑप्टिमायझेशन तंत्रांसोबत जोडणे

React.memo चा वापर अनेकदा इतर React ऑप्टिमायझेशन तंत्रांसोबत केला जातो ज्यामुळे जास्तीत जास्त परफॉर्मन्स मिळवता येतो.

useCallback

useCallback एक React हुक आहे जो फंक्शनला मेमोइझ करतो. ते फंक्शनचे एक मेमोइझ्ड व्हर्जन रिटर्न करते जे फक्त तेव्हाच बदलते जेव्हा त्याच्या डिपेंडेंसीपैकी एक बदलली असेल. हे विशेषतः मेमोइझ्ड कंपोनेंट्सना प्रॉप्स म्हणून फंक्शन्स पास करताना उपयुक्त ठरते.

useCallback शिवाय, पॅरेंट कंपोनेंटच्या प्रत्येक रेंडरवर एक नवीन फंक्शन इन्स्टन्स तयार होतो, जरी फंक्शन लॉजिक समान असले तरीही. यामुळे React.memo फंक्शन प्रॉपला बदललेले मानेल, ज्यामुळे अनावश्यक री-रेंडर्स होतील.

उदाहरण: useCallback चा React.memo सोबत वापर

            import React, { useState, useCallback } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <button onClick={props.onClick}>Click Me</button>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <MyComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

या उदाहरणात, useCallback हे सुनिश्चित करते की handleClick फंक्शन फक्त तेव्हाच पुन्हा तयार केले जाईल जेव्हा count स्टेट बदलेल. हे count स्टेट अपडेटमुळे पॅरेंट कंपोनेंट री-रेंडर होत असताना MyComponent ला अनावश्यकपणे री-रेंडर होण्यापासून प्रतिबंधित करते.

useMemo

useMemo एक React हुक आहे जो व्हॅल्यूला मेमोइझ करतो. ते एक मेमोइझ्ड व्हॅल्यू रिटर्न करते जे फक्त तेव्हाच बदलते जेव्हा त्याच्या डिपेंडेंसीपैकी एक बदलली असेल. हे मेमोइझ्ड कंपोनेंट्सना प्रॉप्स म्हणून पास केलेल्या जटिल गणना किंवा डेरिव्हेड डेटा मेमोइझ करण्यासाठी उपयुक्त आहे.

useCallback प्रमाणेच, useMemo शिवाय, जटिल गणना प्रत्येक रेंडरवर पुन्हा केली जाईल, जरी इनपुट व्हॅल्यूज बदलल्या नसल्या तरी. यामुळे परफॉर्मन्सवर लक्षणीय परिणाम होऊ शकतो.

उदाहरण: useMemo चा React.memo सोबत वापर

            import React, { useState, useMemo } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data}</div>;
});

const ParentComponent = () => {
  const [input, setInput] = useState('');

  const data = useMemo(() => {
    // Simulate a complex calculation
    console.log('Calculating data...');
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return input + result;
  }, [input]);

  return (
    <div>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <MyComponent data={data} />
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

या उदाहरणात, useMemo हे सुनिश्चित करते की data व्हॅल्यूची गणना फक्त तेव्हाच केली जाईल जेव्हा input स्टेट बदलेल. हे MyComponent ला अनावश्यकपणे री-रेंडर होण्यापासून प्रतिबंधित करते आणि पॅरेंट कंपोनेंटच्या प्रत्येक रेंडरवर जटिल गणना पुन्हा कार्यान्वित करणे टाळते.

व्यावहारिक उदाहरणे आणि केस स्टडीज

चला काही वास्तविक-जगातील परिस्थितींचा विचार करूया जिथे React.memo प्रभावीपणे वापरले जाऊ शकते:

उदाहरण १: लिस्ट आयटम कंपोनेंट ऑप्टिमाइझ करणे

कल्पना करा की तुमच्याकडे एक लिस्ट कंपोनेंट आहे जो मोठ्या संख्येने लिस्ट आयटम्स रेंडर करतो. प्रत्येक लिस्ट आयटमला प्रॉप्स म्हणून डेटा मिळतो आणि तो प्रदर्शित करतो. मेमोइझेशनशिवाय, प्रत्येक वेळी लिस्ट कंपोनेंट री-रेंडर होईल (उदा. पॅरेंट कंपोनेंटमधील स्टेट अपडेटमुळे), सर्व लिस्ट आयटम्स देखील री-रेंडर होतील, जरी त्यांचा डेटा बदलला नसला तरी.

लिस्ट आयटम कंपोनेंटला React.memo ने रॅप करून, तुम्ही अनावश्यक री-रेंडर्स प्रतिबंधित करू शकता आणि लिस्टचा परफॉर्मन्स लक्षणीयरीत्या सुधारू शकता.

उदाहरण २: जटिल फॉर्म कंपोनेंट ऑप्टिमाइझ करणे

अनेक इनपुट फील्ड्स आणि जटिल व्हॅलिडेशन लॉजिक असलेल्या फॉर्म कंपोनेंटचा विचार करा. हा कंपोनेंट रेंडर करण्यासाठी गणनारूपी महाग असू शकतो. जर फॉर्म वारंवार री-रेंडर होत असेल, तर तो ऍप्लिकेशनच्या एकूण परफॉर्मन्सवर परिणाम करू शकतो.

React.memo वापरून आणि फॉर्म कंपोनेंटला पास केलेल्या प्रॉप्सचे काळजीपूर्वक व्यवस्थापन करून (उदा. इव्हेंट हँडलर्ससाठी useCallback वापरून), तुम्ही अनावश्यक री-रेंडर्स कमी करू शकता आणि फॉर्मचा परफॉर्मन्स सुधारू शकता.

उदाहरण ३: चार्ट कंपोनेंट ऑप्टिमाइझ करणे

चार्ट कंपोनेंट्समध्ये अनेकदा जटिल गणना आणि रेंडरिंग लॉजिक असते. जर चार्ट कंपोनेंटला पास केलेला डेटा वारंवार बदलत नसेल, तर React.memo वापरल्याने अनावश्यक री-रेंडर्स प्रतिबंधित होऊ शकतात आणि चार्टची प्रतिसादक्षमता सुधारू शकते.

React.memo वापरण्यासाठी सर्वोत्तम पद्धती

React.memo चे फायदे जास्तीत जास्त मिळवण्यासाठी, या सर्वोत्तम पद्धतींचे पालन करा:

• तुमच्या ऍप्लिकेशनचे प्रोफाइल करा: React.memo लागू करण्यापूर्वी, React चे प्रोफाइलर टूल वापरून परफॉर्मन्समध्ये अडथळा निर्माण करणारे कंपोनेंट्स ओळखा. हे तुम्हाला तुमचे ऑप्टिमायझेशन प्रयत्न सर्वात महत्त्वाच्या क्षेत्रांवर केंद्रित करण्यास मदत करेल.
• परफॉर्मन्स मोजा: React.memo लागू केल्यानंतर, परफॉर्मन्समधील सुधारणा मोजा जेणेकरून ते खरोखरच फरक पडत आहे याची खात्री होईल.
• कस्टम कंपॅरिझन फंक्शन्स काळजीपूर्वक वापरा: कस्टम कंपॅरिझन फंक्शन्स वापरताना, ते कार्यक्षम आहेत आणि फक्त संबंधित प्रॉपर्टीजची तुलना करतात याची खात्री करा. कंपॅरिझन फंक्शनमध्ये महागडी ऑपरेशन्स करणे टाळा.
• इम्युटेबल डेटा स्ट्रक्चर्स वापरण्याचा विचार करा: इम्युटेबल डेटा स्ट्रक्चर्स प्रॉप कंपॅरिझन सोपे करू शकतात आणि अनावश्यक री-रेंडर्स प्रतिबंधित करणे सोपे करतात. Immutable.js सारख्या लायब्ररीज या बाबतीत उपयुक्त ठरू शकतात.
• useCallback आणि useMemo वापरा: मेमोइझ्ड कंपोनेंट्सना प्रॉप्स म्हणून फंक्शन्स किंवा जटिल व्हॅल्यूज पास करताना, अनावश्यक री-रेंडर्स टाळण्यासाठी useCallback आणि useMemo वापरा.
• इनलाइन ऑब्जेक्ट निर्मिती टाळा: प्रॉप्स म्हणून इनलाइन ऑब्जेक्ट्स तयार केल्याने मेमोइझेशन बायपास होईल, कारण प्रत्येक रेंडर सायकलमध्ये एक नवीन ऑब्जेक्ट तयार होतो. हे टाळण्यासाठी useMemo वापरा.

React.memo चे पर्याय

जरी React.memo कंपोनेंट मेमोइझेशनसाठी एक शक्तिशाली साधन असले तरी, तुम्ही इतर दृष्टिकोनांचा विचार करू शकता:

• PureComponent: क्लास कंपोनेंट्ससाठी, PureComponent React.memo प्रमाणेच कार्यक्षमता प्रदान करते. ते री-रेंडरिंग करण्यापूर्वी प्रॉप्स आणि स्टेटची शॅलो कंपॅरिझन करते.
• Immer: Immer एक लायब्ररी आहे जी इम्युटेबल डेटासोबत काम करणे सोपे करते. हे तुम्हाला म्युटेबल API वापरून डेटा इम्युटेबली सुधारित करण्याची परवानगी देते, जे React कंपोनेंट्स ऑप्टिमाइझ करताना उपयुक्त ठरू शकते.
• Reselect: Reselect एक लायब्ररी आहे जी Redux साठी मेमोइझ्ड सिलेक्टर्स प्रदान करते. याचा उपयोग Redux स्टोअरमधून डेटा कार्यक्षमतेने मिळवण्यासाठी आणि त्या डेटावर अवलंबून असलेल्या कंपोनेंट्सचे अनावश्यक री-रेंडर्स प्रतिबंधित करण्यासाठी केला जाऊ शकतो.

प्रगत विचार

कॉन्टेक्स्ट (Context) आणि React.memo हाताळणे

React कॉन्टेक्स्ट वापरणारे कंपोनेंट्स कॉन्टेक्स्ट व्हॅल्यू बदलल्यावर री-रेंडर होतील, जरी त्यांचे प्रॉप्स बदलले नसले तरी. React.memo वापरताना हे एक आव्हान असू शकते, कारण कॉन्टेक्स्ट व्हॅल्यू वारंवार बदलल्यास मेमोइझेशन बायपास होईल.

यावर उपाय म्हणून, नॉन-मेमोइझ्ड कंपोनेंटमध्ये useContext हुक वापरण्याचा विचार करा आणि नंतर संबंधित व्हॅल्यूज मेमोइझ्ड कंपोनेंटला प्रॉप्स म्हणून पास करा. हे तुम्हाला कोणते कॉन्टेक्स्ट बदल मेमोइझ्ड कंपोनेंटचे री-रेंडर्स ट्रिगर करतात हे नियंत्रित करण्यास अनुमती देईल.

React.memo मधील समस्या डीबग करणे

जर तुम्हाला React.memo वापरताना अनपेक्षित री-रेंडर्सचा अनुभव येत असेल, तर तुम्ही काही गोष्टी तपासू शकता:

• प्रॉप्स खरोखरच समान आहेत का ते तपासा: प्रॉप्सची तपासणी करण्यासाठी console.log किंवा डीबगर वापरा आणि री-रेंडरच्या आधी आणि नंतर ते खरोखरच समान आहेत याची खात्री करा.
• इनलाइन ऑब्जेक्ट निर्मिती तपासा: प्रॉप्स म्हणून इनलाइन ऑब्जेक्ट्स तयार करणे टाळा, कारण यामुळे मेमोइझेशन बायपास होईल.
• तुमच्या कस्टम कंपॅरिझन फंक्शनचे पुनरावलोकन करा: जर तुम्ही कस्टम कंपॅरिझन फंक्शन वापरत असाल, तर ते योग्यरित्या अंमलात आणले आहे आणि फक्त संबंधित प्रॉपर्टीजची तुलना करते याची खात्री करा.
• कंपोनेंट ट्रीची तपासणी करा: कंपोनेंट ट्रीची तपासणी करण्यासाठी आणि कोणते कंपोनेंट्स री-रेंडर्सला कारणीभूत आहेत हे ओळखण्यासाठी React चे DevTools वापरा.

निष्कर्ष

React.memo हे React ऍप्लिकेशन्समध्ये रेंडरिंग परफॉर्मन्स ऑप्टिमाइझ करण्यासाठी एक मौल्यवान साधन आहे. त्याचा उद्देश, वापर आणि मर्यादा समजून घेऊन, तुम्ही अनावश्यक री-रेंडर्स प्रतिबंधित करण्यासाठी आणि तुमच्या ऍप्लिकेशन्सची एकूण कार्यक्षमता सुधारण्यासाठी त्याचा प्रभावीपणे वापर करू शकता. ते विचारपूर्वक वापरा, इतर ऑप्टिमायझेशन तंत्रांसोबत जोडा आणि परफॉर्मन्सवरील परिणाम नेहमी मोजा जेणेकरून ते खरोखरच फरक पडत आहे याची खात्री होईल.

कंपोनेंट मेमोइझेशन तंत्रांचा काळजीपूर्वक वापर करून, तुम्ही अधिक सुरळीत, अधिक प्रतिसाद देणारे React ऍप्लिकेशन्स तयार करू शकता जे एक चांगला वापरकर्ता अनुभव देतात.

अधिक वाचन आणि संसाधने

• React.memo डॉक्युमेंटेशन
• React मध्ये परफॉर्मन्स ऑप्टिमाइझ करणे
• useMemo आणि useCallback